<template>
	<view class="mobile-item-container gradient-background">
		<Navbar title="单词测试" bgColor="transparent" :h5Show="false"></Navbar>
		<u-row
			style="background-color: #effff8; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);border-radius:10px;margin-top: 10px;">
			<u-col style="text-align: center; padding: 10px;" span="4">
				<u--text size="12" align="center" text="测试单词数"></u--text>
				<view>{{allCount}}</view>
			</u-col>
			<u-col style="text-align: center; padding: 10px;" span="4">
				<u--text size="12" align="center" text="错误单词数"></u--text>
				<view>{{errorCount}}</view>
			</u-col>
			<u-col style="text-align: center; padding: 10px;" span="4">
				<u--text size="12" align="center" text="正确率"></u--text>
				<view>{{suePercentage}}</view>
			</u-col>
		</u-row>
		<u-divider textPosition="left" text="错题回顾"></u-divider>
		<u-list height="auto" style="margin-top: 30px;" key="ak">
			<u-list-item v-if="!item.choose" v-for="(item, index) in list" :key="index">
				<view style="display: flex; align-items: center;">
					<b @click="toDetail(item.id)" style="padding-right: 10px;">{{item.english}}</b>
					<u--text type="info" size="12" :text="item.phoneticSymbol"></u--text>
					<PlayAudio :path="item.voiceFilesPath" size="14px" ></PlayAudio>
				</view>
				<view style="display: flex; align-items: center;margin-top: 5px;">
					<view style="color: #9093b3;padding-right: 10px;font-size: 10px;">{{item.partOfSpeech}}</view>
					<u--text blod size="14" :text="item.chinese"></u--text>
				</view>
				<!-- 添加虚线 -->
				<u-line style="padding-top: 10px;padding-bottom: 10px;" color="#3f3f3f" dashed></u-line>
			</u-list-item>
		</u-list>
		<view class="button-container">
			<u-button class="button" type="success" shape="circle" @click="redirectTo()">完成测试</u-button>
		</view>
	</view>
</template>

<script>
	import Navbar from '@/components/navbar/Navbar'
	import PlayAudio from '../../index/playAudio'

	export default {
		components: {
			Navbar,
			PlayAudio,
		},
		data() {
			return {
				list: [],
				allCount: 0,
				errorCount: 0,
				suePercentage: "",
			}
		},
		created() {},
		onLoad(option) {
			//+ encodeURIComponent(JSON.stringify(data))
			if (JSON.parse(option.data)) {
				let list = JSON.parse(decodeURIComponent(option.data)) //取值的时候使用decodeURIComponent()解码再用JSON.parse()解析
				this.loadData(list)
			}

		},
		methods: {
			// 加载一个题目
			loadData(list) {
				this.list = list;
				//计算正确率choose
				let falseCount = this.list.reduce((acc, curr) => curr.choose === false ? acc + 1 : acc, 0);
				let trueCount = this.list.reduce((acc, curr) => curr.choose === true ? acc + 1 : acc, 0);
				let totalCount = this.list.length;
				let truePercentage = (trueCount / totalCount) * 100;
				this.allCount = totalCount;
				this.errorCount = falseCount;
				this.suePercentage = truePercentage.toFixed(2) + "%";
				console.log("ret:", falseCount, trueCount, totalCount, this.suePercentage);
			},
			toDetail(id) {
				uni.navigateTo({
					url: '/pages/index/info?id=' + id
				})
			},
			redirectTo() {
				uni.switchTab({
					url: '/pages/work/index'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.button-container {
		position: fixed;
		width: 100%;
		bottom: 20px;
		/* 距离屏幕底部的距离 */
		left: 50%;
		/* 按钮居中 */
		transform: translateX(-50%);
		/* 按钮居中 */
	}

	.button {
		font-size: 16px;
		width: 90%;
		background: linear-gradient(145deg, #80c0be, #4c9480);
		border: none;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	}
</style>